<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://"
            + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<!DOCTYPE html>
<html>
<head>
    <base href="<%=basePath%>">
    <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
    Remove this if you use the .htaccess -->
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>知识学院</title>
    <%--<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">--%>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="keywords" content="">
    <link rel="shortcut icon" href="<%=basePath%>resources/images/favicon.ico"/>
    <link href="resources/bootstrap/css/bootstrap-huan.css" rel="stylesheet">
    <link href="resources/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href="resources/css/style.css" rel="stylesheet">

    <style>
        .question-number {
            color: #5cb85c;
            font-weight: bolder;
            display: inline-block;
            width: 30px;
            text-align: center;
        }

        .question-number-2 {
            color: #5bc0de;
            font-weight: bolder;
            display: inline-block;
            width: 30px;
            text-align: center;
        }

        .question-number-3 {
            color: #d9534f;
            font-weight: bolder;
            display: inline-block;
            width: 30px;
            text-align: center;
        }

        a.join-practice-btn {
            margin: 0;
            margin-left: 20px;
        }

        .content ul.question-list-knowledge {
            padding: 8px 20px;
        }

        .knowledge-title {
            background-color: #EEE;
            padding: 2px 10px;
            margin-bottom: 20px;
            cursor: pointer;
            border: 1px solid #FFF;
            border-radius: 4px;
        }

        .knowledge-title-name {
            margin-left: 8px;
        }

        .point-name {
            width: 200px;
            display: inline-block;
        }

        .col-xs-3 {
            width: 22%;
        }
    </style>

</head>

<body>

<jsp:include page="header.jsp"/>

<!-- Slider starts -->

<%--<div class="full-slider">
    <!-- Slider (Flex Slider) -->

    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <div class="flexslider">
                    <div class="flex-caption">
                        <!-- Left column -->
                        <div class="col-l">
                            <p style="text-indent:2em;">
                                本系统主要应用于公司内部人员的培训及考核，拥有在线课程学习，课程知识点试题练习，在线考试及自动阅卷判分功能。
                            </p>
                            &lt;%&ndash;<p style="text-indent:2em;">
                                软件采用GPL协议，完全开放且免费，并且有固定的开发团队提供技术支持
                            </p>&ndash;%&gt;
                        </div>
                        <!-- Right column -->
                        <div class="col-r">
                            <!-- Use the class "flex-back" to add background inside flex slider -->
                            <!-- <img alt="" src="../resources/images/ad.png"> -->
                            <p>
                                如果您对软件有任何反馈和建议，加入我们的QQ群539541661一起讨论吧
                            </p>
                            <!-- Button -->
                            &lt;%&ndash;<a class="btn btn-default btn-cta" href="user-register">
                                <i class="fa fa-arrow-circle-down"></i> 马上加入我们吧
                            </a>&ndash;%&gt;
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>--%>
<div class="content" style="padding:30px 0 0 0;">
    <div class="container">
        <div class="row">
            <a class="select-test col-xs-4 home-link-anchor" href="student/practice-list">
                <div class="select-test-icon">
                    <i class="fa fa-book"></i>
                </div>
                <h3> 试题练习 </h3>
                <p>
                    您可以免费获取对应专业的培训视频或者文档资料，通过在线练习可以考察您的知识掌握程度。
                </p>
            </a>
            <a class="select-test col-xs-4 home-link-anchor" href="exam-list">
                <div class="select-test-icon">
                    <i class="fa fa-trophy"></i>
                </div>
                <h3> 在线考试 </h3>
                <p>
                    参加正式或者模拟考试，您的教师可以发布正式的考试，您也可以主动申请这些考试
                </p>
            </a>
            <div class="select-test col-xs-4">
                <div>
                    <h3> 快速考试入口 </h3>
                    <p>
                        通过已有的准考证快速参加考试，具体的准考证请从相关教师处获取，或者在个人中心的考试信息中查找
                    </p>

                </div>
                <div style="text-align: center;margin-top:20px;">
                    <a class="btn btn-info quick-start-btn" href="quick-start">快速考试入口
                        <i class="fa fa-arrow-circle-o-right"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>
<%--课程--%>
<%--<div class="content" style="padding:30px 0 100px 0;background-color: rgb(246, 249, 250);">
    <div class="container">
        <div style="margin-bottom: 10px;">
            <h3>专业领域</h3>
            <p>
                我们提供多种专业课程供你学习
            </p>
        </div>
        <div class="row" id="li">

        </div>
    </div>
</div>--%>
<%--系统公告--%>
<div class="content" style="padding:30px 0 100px 0;">
    <c:if test="${fn:length(newsList) > 0 }">
        <div class="container">
            <div>
                <h3>最新公告</h3>
            </div>
            <div style="margin-top: 20px;">
                <ul class="news-list">
                    <c:choose>
                        <c:when test="${fn:length(newsList) eq 1 }">
                            <li class="news-list-item clearfix">
                                <a class="home-link-anchor" href="news/${newsList[0].newsId }" target="_blank">
                                    <div class="news-list-thumbnail">
                                        <img src="resources/images/notice.png">
                                    </div>
                                    <div class="news-list-content">
                                        <div class="news-list-title">
                                                ${newsList[0].title }
                                        </div>
                                        <div class="news-list-creater">
                                            <i class="fa fa-user"></i><span>${newsList[0].creator }</span>
                                            <i class="fa fa-clock-o"></i>
                                            <span><fmt:formatDate value="${newsList[0].createTime }"
                                                                  pattern="yyyy-MM-dd HH:mm"/></span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                        </c:when>
                        <c:otherwise>
                            <li class="news-list-item clearfix">
                                <a class="home-link-anchor" href="news/${newsList[0].newsId }" target="_blank">
                                    <div class="news-list-thumbnail">
                                        <img src="resources/images/notice.png">
                                    </div>
                                    <div class="news-list-content">
                                        <div class="news-list-title">
                                                ${newsList[0].title }
                                        </div>
                                        <div class="news-list-creater">
                                            <i class="fa fa-user"></i><span>${newsList[0].creator }</span>
                                            <i class="fa fa-clock-o"></i>
                                            <span><fmt:formatDate value="${newsList[0].createTime }"
                                                                  pattern="yyyy-MM-dd HH:mm"/></span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                            <li class="news-list-item clearfix">
                                <a class="home-link-anchor" href="news/${newsList[1].newsId }">
                                    <div class="news-list-thumbnail">
                                        <img src="resources/images/notice.png">
                                    </div>
                                    <div class="news-list-content">
                                        <div class="news-list-title">
                                                ${newsList[1].title }
                                        </div>
                                        <div class="news-list-creater">
                                            <i class="fa fa-user"></i><span>${newsList[1].creator }</span>
                                            <i class="fa fa-clock-o"></i>
                                            <span><fmt:formatDate value="${newsList[1].createTime }"
                                                                  pattern="yyyy-MM-dd HH:mm"/></span>
                                        </div>
                                    </div>
                                </a>
                            </li>
                        </c:otherwise>
                    </c:choose>
                </ul>
            </div>
        </div>
    </c:if>
</div>
<jsp:include page="footer.jsp"/>
<!-- Slider Ends -->

<!-- Javascript files -->
<!-- jQuery -->
<script type="text/javascript" src="resources/js/jquery/jquery-1.9.0.min.js"></script>
<!-- Bootstrap JS -->
<script type="text/javascript" src="resources/bootstrap/js/bootstrap.min.js"></script>
<script>
    $(function () {
        var list ="";
        bindQuestionKnowledage();
        var result = checkBrowser();
        if (!result) {
            alert("请至少更新浏览器版本至IE8或以上版本");
        }
        $.ajax({
            type:"get",
            url:"./home-info",
            dataType:"json",
            success:function (data) {
                $.each(data,function (key,value) {
                     var s = " <a class='field-category-div col-xs-3 home-link-anchor' href= 'student/training/"+ value.trainingId +"'>" +
                        "       <div class='field-category-title' style='background-color: #E97051;'>" +
                        "        <div class='field-category-inner'>" +
                        "         <i class='fa fa-play-circle'></i></div>" +
                        "          <div class='field-category-text '>" +
                        "          <p>" + value.trainingName + "</p></div></div>" +
                        "          <div class='field-category-footer'>" +
                        "          <div class='field-category-footer-sub'>" +
                        "          <p class='field-student-subtitle'>" + value.trainingName + "</p></div></div></a>";
                     list+=s;
                });
                //添加到页面
                $("#li").append(list);
            }
        });
    });

    function checkBrowser() {
        var browser = navigator.appName;
        var b_version = navigator.appVersion;
        if(b_version.indexOf(";")==-1){
            return true;
        }
        var version = b_version.split(";");
        var trim_Version = version[1].replace(/[ ]/g, "");
        if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE7.0") {
            return false;
        } else if (browser == "Microsoft Internet Explorer"
            && trim_Version == "MSIE6.0") {
            return false;
        } else
            return true;
    }

    function bindQuestionKnowledage() {
        $(".knowledge-title").click(function () {
            var ul = $(this).parent().find(".question-list-knowledge");

            if (ul.is(":visible")) {
                $(this).find(".fa-chevron-down").hide();
                $(this).find(".fa-chevron-up").show();

                $(".question-list-knowledge").slideUp();

            } else {
                $(".fa-chevron-down").hide();
                $(".fa-chevron-up").show();

                $(this).find(".fa-chevron-up").hide();
                $(this).find(".fa-chevron-down").show();

                $(".question-list-knowledge").slideUp();
                ul.slideDown();
            }
        });
    }
</script>
<%--<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");
document.write(unescape("%3Cspan id='cnzz_stat_icon_1252987997'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s19.cnzz.com/z_stat.php%3Fid%3D1252987997' type='text/javascript'%3E%3C/script%3E"));
</script>--%>
</body>
</html>
